/* global document */
import React from 'react'
import PropTypes from 'prop-types'
import {Button, Cascader, Col, DatePicker, Divider, Form, Icon, Input, Row, Select} from 'antd'
import classnames from 'classnames'
import styles from './Filter.less'
import {message} from "antd/lib/index"
import Position from "utils/position"

const FormItem = Form.Item
const {Option} = Select

const ColProps = {
  xs: 6,
  sm: 6,
  style: {
    marginBottom: 6,
  },
}

const formItemLayout = {
  labelCol: {span: 6},
  wrapperCol: {span: 18},
  style: {
    marginBottom: 10,
  },
}

const Filter = ({
                  statList,
                  onFilterChange,
                  form: {
                    getFieldDecorator,
                    getFieldsValue,
                    setFieldsValue,
                  },
                }) => {

  const handleFields = (fields) => {
    const {beginTime, endTime, address} = fields
    if (beginTime) {
      fields.beginTime = beginTime.format('YYYY-MM-DD HH:mm:ss')
    }
    if (endTime) {
      fields.endTime = endTime.format('YYYY-MM-DD HH:mm:ss')
    }
    if (address) {
      fields.provinceId = address[0]
      fields.cityId = address[1]
      fields.areaId = address[2]
      delete fields.address
    }
    return fields
  }

  const status = [
    {
      id: 1,
      name: '群成员采集',
      color: '#E03636',
      icon: 'team',
      count: statList[0],
    },
    {
      id: 2,
      name: '男',
      color: '#4cb4e7',
      icon: 'man',
      count: statList[1],
    },
    {
      id: 3,
      name: '女',
      color: '#FF6E97',
      icon: 'woman',
      count: statList[2],
    },
    {
      id: 4,
      name: '未知',
      color: 'rgba(0, 0, 0, 0.45)',
      icon: 'question',
      count: statList[3],
    },
  ]

  const handleFormReset = () => {
    const fields = getFieldsValue()
    for (let item in fields) {
      if ({}.hasOwnProperty.call(fields, item)) {
        if (fields[item] instanceof Array) {
          fields[item] = []
        } else {
          fields[item] = undefined
        }
      }
    }
    setFieldsValue(fields)
    handleSubmit()
  }

  const valid = fields => {
    const {type, keyword} = fields

    if (!type && keyword) {
      message.warn("请选择查询类型")
      return false
    }

    return true
  }

  const handleSubmit = () => {
    let fields = getFieldsValue()
    if (!valid(fields)) {
      return
    }
    fields = handleFields(fields)
    onFilterChange(fields)
  }

  const renderSimpleForm = () => (
    <Form layout="horizontal">
      <Row gutter={24}>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="好友微信">
            {getFieldDecorator('wxId')(<Input placeholder="请输入"/>)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="微信昵称">
            {getFieldDecorator('wxNickname')(<Input placeholder="请输入"/>)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="归属群名">
            {getFieldDecorator('chatroomName')(<Input placeholder="请输入"/>)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 4}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="性别">
            {getFieldDecorator('gender')(
              <Select allowClear placeholder="请选择">
                <Option value={0}>未知</Option>
                <Option value={1}>男</Option>
                <Option value={2}>女</Option>
              </Select>,
            )}
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={12}>
          <FormItem labelCol={{span: 4}} wrapperCol={{span: 20}} label="录入系统时间">
            <Col span={11}>
              {getFieldDecorator('beginTime')(<DatePicker style={{width: '100%'}} placeholder="开始时间"/>)}
            </Col>
            <Col span={2}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
              </span>
            </Col>
            <Col span={11}>
              {getFieldDecorator('endTime')(<DatePicker style={{width: '100%'}} placeholder="结束时间"/>)}
            </Col>
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="省份/城市">
            {getFieldDecorator('address')(
              <Cascader
                options={Position}
                placeholder="请选择城市"
              />,
            )}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem label={''}>
            <Button onClick={handleSubmit} className="margin-right" type="primary" htmlType="submit">查询</Button>
            <Button onClick={handleFormReset}>重置</Button>
          </FormItem>
        </Col>
      </Row>
    </Form>
  )


  const renderForm = () => {
    return renderSimpleForm()
  }

  return (
    <div>
      <Row gutter={24}>
        <Col {...ColProps} xl={{span: 1}} md={{span: 2}} sm={{span: 6}}>
        </Col>
        {status.map(item => (
          <Col {...ColProps} xl={{span: 4}} md={{span: 4}} sm={{span: 12}}>
            <div className={classnames(styles['flex-status-bar'])} style={{color: `${item.color}`}}>
              <Icon type={item.icon} style={{fontSize: 20}} theme="outlined"/>&nbsp;
              <span>{item.name}：<span style={{fontWeight: 'bold', fontSize: 18}}>{item.count}</span></span>
            </div>
          </Col>
        ))}
        <Divider/>
      </Row>
      {renderForm()}
    </div>
  )
}

Filter.propTypes = {
  onAdd: PropTypes.func,
  form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
}

export default Form.create()(Filter)
